<template>
	<div>
		<el-container>
			
			<!-- 左侧 -->
			<el-container>
			<el-aside class="div_left" width="1rem"> 
			
			<!-- 头像 -->
			<div class="div_tx"></div>
			
			<!-- 金币按钮 -->
			<div class="div_gold">
				<img src="./页面素材/金币2.png" />
				<span>90</span>
			</div>
			
			<div class="div_left_text">
				<span>最近登录</span> <br />
				<span>2019-03-15   07:30:12</span> <br />
				
			</div>
			<img src="./页面素材/left1.png" class="img_left"/>
			</el-aside>
			
			<!-- 主体内容 -->
			<el-main class="div_main" >
				<el-row>
					<el-col :span="9" :offset="1">
						<div class="div_main_left">
							
							<div class="div_title">
								<i class="el-icon-rank"></i>
								<span>智慧目标</span>
							</div>
							
							<div class="div_gold div_rightTop_btn">
								<span>去兑换</span>
							</div>
							
							<img src="./页面素材/人物头像.png" />
							<div class="div_img_aside">
								<span>苹果电脑</span> <br />
								<img src="./页面素材/金币2.png" />
								<label>需要金币5000000</label> <br />
								<div class="div_progress"> <span>500</span> </div>
								<el-progress :percentage="70" style="width: 1.8rem" :stroke-width="3" color="rgb(253,233,016)"></el-progress>
							</div>
							
						</div>
					</el-col>
					
					
					<el-col :span="9"  :offset="1">
						<div class="div_main_left ">
							
							<div class="div_title">
								<i class="el-icon-edit"></i>
								<span>教师信息</span>
							</div>
							
							<div class="div_gold div_rightTop_btn btn_LandR"></div>
							
						<div class="div_threeInput_biggest">
							<div class="div_threeInput1">
								<label>朱恬</label> <br />
								<i class="el-icon-mobile-phone"></i>  <span>电话:15873778378</span> <br />
								<i class="el-icon-message"></i> <span>邮箱:1329074047@qq.com</span>
							</div>
							
							<div class="div_threeInput2">
								<label>朱恬</label> <br />
								<i class="el-icon-mobile-phone"></i>  <span>电话:15873778378</span> <br />
								<i class="el-icon-message"></i> <span>邮箱:1329074047@qq.com</span>
							</div>
							
							<div class="div_threeInput2">
								<label>朱恬</label> <br />
								<i class="el-icon-mobile-phone"></i>  <span>电话:15873778378</span> <br />
								<i class="el-icon-message"></i> <span>邮箱:1329074047@qq.com</span>
							</div>
						</div>
							
						</div>
					</el-col>
				</el-row> 
				
				<el-row>
					<el-col :span="19" :offset="1">
						<div class="div_class">
							<div class="div_top_title">
								<img src="./页面素材/团队.png"/>
								<span>我的班级</span>
							</div>
							
							<div class="div_top_btn">
								<span>更多</span>
								<div> <i class="el-icon-arrow-right"></i> </div>
							</div>
							
							<div class="div_class_list">
								<div class="div_classImg"></div>
								<div class="div_classText">
									<label>java实训班级</label> <br />
									<img src="./页面素材/元素.png"/><span>类型：正式班 </span>
									<img src="./页面素材/团队.png"/><span>班级老师：刘老师 </span>
									<br />
									<img src="./页面素材/团队.png"/><span>助教：刘助教 </span>
									<img src="./页面素材/简报.png"/><span>班级级别：高校 </span>
								 <br />
								 <div class="div_classText_btn1">
									 <span>进度计划1</span>
								 </div>
								 <div class="div_classText_btn2">
								 	 <span>进度计划2</span>
								 </div> <br />
								
								 <el-progress :percentage="58" style="width: 3rem" :stroke-width="3" color="rgb(253,233,016)"></el-progress>
							
								</div>
								
								<div class="div_classBtn">
									<span>进行中</span> <br />
									<img src="./页面素材/组18.png" />
								</div>
							</div>
							
							
							<div class="div_class_list">
								<div class="div_classImg"></div>
								<div class="div_classText">
									<label>java实训班级</label> <br />
									<img src="./页面素材/元素.png"/><span>类型：正式班 </span>
									<img src="./页面素材/团队.png"/><span>班级老师：刘老师 </span>
									<br />
									<img src="./页面素材/团队.png"/><span>助教：刘助教 </span>
									<img src="./页面素材/简报.png"/><span>班级级别：高校 </span>
								 <br />
								 <div class="div_classText_btn1">
									 <span>进度计划1</span>
								 </div>
								 <div class="div_classText_btn2">
								 	 <span>进度计划2</span>
								 </div> <br />
								
								 <el-progress :percentage="58" :stroke-width="3" 
								 style="width: 2.3125rem" 
								 color="rgb(253,233,016)"></el-progress>
							
								</div>
								
								<div class="div_classBtn">
									<span>进行中</span> <br />
									<img src="./页面素材/组18.png" />
								</div>
							</div>
							
							
							<div class="div_class_list">
								<div class="div_classImg"></div>
								<div class="div_classText">
									<label>java实训班级</label> <br />
									<img src="./页面素材/元素.png"/><span>类型：正式班 </span>
									<img src="./页面素材/团队.png"/><span>班级老师：刘老师 </span>
									<br />
									<img src="./页面素材/团队.png"/><span>助教：刘助教 </span>
									<img src="./页面素材/简报.png"/><span>班级级别：高校 </span>
								 <br />
								 <div class="div_classText_btn1">
									 <span>进度计划1</span>
								 </div>
								 <div class="div_classText_btn2">
								 	 <span>进度计划2</span>
								 </div> <br />
								
								 <el-progress :percentage="58" :stroke-width="3" style="width: 2.3125rem" color="rgb(253,233,016)"></el-progress>
							
								</div>
								
								<div class="div_classBtn">
									<span>进行中</span> <br />
									<img src="./页面素材/组18.png" />
								</div>
							</div>
							
							  
							  
						</div>
						
					</el-col>
					
				</el-row>
				
				<el-row class="row_more">
					<el-col :span="2" :offset="10">
						<div class="div_btn_more"> 
							<div> 查看更多 </div>
						</div>
					</el-col>
				</el-row>
				
				
				
			</el-main>
			
			</el-container>
			
		</el-container>
		
		
		
		<!-- 右侧固定不动的部分 -->
		<div class="div_right_biggest">
		<div class="div_right">
			<div>
				<img src="./页面素材/员工黄页.png" /> <br />
				<span>在线咨询</span>
			</div>
			
			<div>
				<img src="./页面素材/团队.png" /> <br />
				<span>微信咨询</span>
			</div>
			
			<div>
				<img src="./页面素材/目标库.png" /> <br />
				<span>APP下载</span>
			</div>
			
			<div>
				<img src="./页面素材/主页.png" /> <br />
				<span>置顶</span>
			</div>
		</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{}
		},methods:{}
	}
</script>

<style scoped>
	

	
	
	/* 左侧 */
	.div_left{
		height: 3rem;
		width: 100%;
		overflow: hidden;
		background: url(./页面素材/页边栏.png);
		background-size: 100% 100%;
		
	}
	
	/* 左侧的头像 */
	.div_tx{
		background: url(./页面素材/图层12.png);
		width: 0.375rem;
		height: 0.375rem;
		border: 0.0375rem solid white;
		border-radius: 0.25rem;
		margin: auto;
		margin-top: 0.375rem;
	}
	
	/* 金币按钮 */
	.div_gold{
		background: url(./页面素材/金币显示框.png);
		background-size: 100% 100%;
		margin: auto;
		margin-top: 0.09375rem;
		height: 0.15625rem;
		width: 0.4375rem;
		text-align: center;
		font-size: 0.08125rem;
		line-height: 0.15625rem;
	}
		
	.div_gold img{
		width: 0.1rem;
	}
	
	.div_left_text{
		padding-bottom: 0.0625rem;
		width: 0.875rem;
		font-size: 0.08125rem;
		color: white;
		border-bottom: 0.00625rem solid white;
		line-height: 0.1375rem;
		margin-left: 0.03125rem;
		margin-top: 0.21875rem;
	}
	
	.img_left{
		width: 0.75rem;
		margin-left: 0.09375rem;
		margin-top: 0.0625rem;
	}
	
	
	/* 主体内容 */
	.div_main{
		position: relative;
		padding: 0;
	}
	
	.div_main_left{
		background: url(./页面素材/教师信息栏.png);
		background-size: 100% 100%;
		height: 0.9375rem;
		position: relative;
		margin-top:0.125rem;
		padding-top: 0.0375rem;
	}
	.div_title{
		color: white;
		font-size:0.0875rem;
		margin-left: 0.03125rem;
	}
	
	.div_main_left>img{
		width: 0.875rem;
		height: 0.5625rem;
		float: left;
		margin: 0.17rem 0.0625rem 0 0.125rem;
	}
	
	.div_rightTop_btn{
		position: absolute;
		top: 0.0625rem;
		left: 82%;
	}
	.btn_LandR{
		background: url(./页面素材/左右方向.png) no-repeat;
		background-size: 60%;
		left: 88%;
	}
	
	.div_img_aside{
		float: right;
		color: white;
		margin-top: 0.18rem;
		font-size: 0.0875rem;
		width: 1.8rem;
		position: relative;
	}
	.div_img_aside label{
		line-height: 0.1875rem;
		font-size: 0.075rem;
	}
	.div_img_aside>img{
		width:0.1rem;
		vertical-align: middle;
	}
	
	/* 进度条上的小标签 */
	.div_progress{
		background:url(./页面素材/进度显示.png) no-repeat,url(./页面素材/矩形13.png) ;
		background-size:0.2rem 0.10625rem,100% 100%;
		background-position: 0.025rem 0.00625rem,0;
		width: 0.25rem;
		height: 0.125rem;
		margin-left: 1.09375rem;
		text-align: center;
		font-size: 0.06875rem;
		color: #333;
	}
	
	/* 主体部分右上的 教师信息框 */
	
	.div_threeInput_biggest div{
		background-size: 100% 100%;
		width: 0.8625rem;
		margin-top: 0.15rem;
		margin-left: 0.0625rem;
		height: 0.46rem;
		float: left;
		color: white;
		font-size: 0.05625rem;
		padding-left: 0.0625rem;
		padding-top: 0.125rem;
	}
	.div_threeInput1{
		background: url(./页面素材/教师信息框2.png) no-repeat;
	}
	
	.div_threeInput2{
		background: url(./页面素材/教师信息框.png) no-repeat;
	}
	.div_threeInput2 i{
		color: rgb(253,233,016);
	}
	
	.div_threeInput_biggest label{
		font-size: 0.08125rem;
		font-weight: bold;
		line-height: 0.1875rem;
	}
	
	/* 课程栏目 */
	.div_class{
		background:url(./页面素材/myClassBiggest.png);
		margin: auto;
		background-size:100% 100%;
		width: 95%;
		height: 2.7rem;
		margin-top: 0.3rem;
		padding-top: 0.09375rem;
		position: relative;
	}
	
	.div_top_title{
		background:  url(./页面素材/myClassTop.png) no-repeat,
				url(./页面素材/我的班级框.png) ;
		background-size: 96% 90%,100% 100%;
		background-position: 0.03125rem 0.0125rem,0 0;
		width: 1.5rem;
		height: 0.25rem;
		position: absolute;
		top: -0.0625rem;
		left: 40%;
		color: white;
		font-size: 0.1rem;
		text-align: center;
		line-height: 0.25rem;
	}
	.div_top_title img{
		width: 0.1375rem;
		vertical-align: middle;
	}
	
	.div_top_btn{
		position: absolute;
		top: 0.09375rem;
		left: 92%;
		font-size: 0.075rem;
		color: white;
	}
	.div_top_btn div{
		background: url(./页面素材/椭圆6.png);
		background-size: 100% 100%;
		width: 0.1125rem;
		height: 0.1125rem;
		display: inline-block;
		color: #333;
		text-align: center;
		margin-left: 0.03125rem;
	}
	
	
	/* 课程内容栏 */
	.div_class_list{
		margin: 0.03125rem 0.09375rem 0 0.125rem;
		padding-top: 0.03125rem;
		height: 0.78125rem;
		border-bottom: 0.0125rem solid #0046f7;
	}
	.div_class_list>div{
		float: left;
	}
	
	.div_classImg{
		background: url(./页面素材/class.png);
		background-size: 100% 100%;
		width: 0.875rem;
		height: 0.625rem;
		margin-right: 0.09375rem;
		margin-top: 0.003125rem;
	}
	
	.div_classText{
		font-size: 0.06875rem;
		color: white;
	}
	.div_classText label{
		font-size: 0.0875rem;
		font-weight: bold;
		line-height: 0.125rem;
	}
	.div_classText>span{
		margin-right: 0.375rem;
	}
	.div_classText img{
		vertical-align: middle;
		margin-right: 0.03125rem;
		width: 0.06875rem;
	}
	
	.div_class_list .div_classBtn{
		float: right;
		color: red;
		font-size: 0.0875rem;
		margin-right: 0.125rem;
		text-align: center;
		padding-top: 0.125rem;
	}
	.div_classBtn img{
		width: 0.5rem;
		margin-top: 0.125rem;
	}
	
	
	.div_classText div{
		background-size: 100% 100%;
		width: 0.5625rem;
		height: 0.15625rem;
		display: inline-block;
		text-align: center;
		line-height: 0.125rem;
		margin-top: 0.05rem;
	}
	.div_classText_btn1{
		background: url(./页面素材/进度计划1.png);
	}
	.div_classText_btn2{
		background: url(./页面素材/进度计划2.png);
		color: #000350;
		margin-left: 0.125rem;
	}
	
	/* 最下面的查看更多的按钮图 */
	
	.div_btn_more{
		background: url(./页面素材/组26.png);
		background-size: 100% 100%;
		width: 0.5rem;
		height: 0.15625rem;
		padding-top: 0.03125rem;
		margin-top: 0.09375rem;
	}
	.div_btn_more div{
		margin: auto;
		background: #ffd800;
		font-size: 0.075rem;
		width: 0.3rem;
		text-align: center;
	}
	
	/* 右侧的固定的部分 */
	.div_right_biggest{
		border: 0.00625rem solid #0082fb;
		height: 0.145rem;
		position: absolute;
		top: 30%;
		left: 88%;
		width: 0.35625rem;
	}
	
	.div_right{
		background: #0c30bb;
		position: absolute;
		top: 0.01875rem;
		left: 0.025rem;
		width: 0.34375rem;
		
		padding: 0 0.01875rem;
	}
	.div_right div{
		border-bottom:0.00625rem solid #0082fb;
		text-align: center;
		font-size: 0.0625rem;
		color: white;
		padding: 0.0625rem 0.03125rem 0.03125rem 0.03125rem;
	}
	
	.div_right img{
		width: 45%;
		margin-bottom: 0.03125rem;
	}
</style>
